<template>
  <!--新增推荐人-->
  <el-dialog
    title="新增推荐人"
    :visible.sync="dialogVisible17"
    width="400px">
    <div style="overflow: hidden">
      <el-tabs v-model="teiJianActiveName" @tab-click="">
        <el-tab-pane label="选择已有推荐人" name="first" v-if="type=='edit'">
          <el-form :model="teiJianForm" size="mini" label-width="120px" ref="teiJianForm" :rules="rules17">
            <el-form-item label="推荐人：" prop="introducerId">
              <el-select
                v-model="teiJianForm.introducerId"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="remoteMethodLoading">
                <el-option
                  v-for="item in options17"
                  :key="item.introducerId"
                  :label="item.introducerName + '('+item.introducerMobile+')'"
                  :value="item.introducerId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="推荐时间：" prop="startTime">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="teiJianForm.startTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="新增推荐人" name="second">
          <el-form :model="teiJianForm2" size="mini" label-width="120px" ref="teiJianForm2" :rules="rules18">
            <el-form-item label="推荐类型：" prop="target" >
              <el-radio-group v-model="teiJianForm2.introducerType" @change="changeIntroducerType">
                <el-radio :label="1">外部</el-radio>
                <el-radio :label="2">内部</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="推荐人：" prop="introducerName" v-if="teiJianForm2.introducerType == 2">
              <el-select v-model="teiJianForm2.introducerName" filterable placeholder="请选择" value-key="realName" @change="handleSelectUserName">
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.realName"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="推荐人：" prop="introducerName" v-if="teiJianForm2.introducerType == 1">
              <el-input v-model="teiJianForm2.introducerName"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="introducerMobile">
              <el-input v-model="teiJianForm2.introducerMobile"></el-input>
            </el-form-item>
            <el-form-item label="推荐时间：" prop="startTime">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="teiJianForm2.startTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose17">取 消</el-button>
              <el-button type="primary" @click="handleConfirm17" :loading="btnLoading17">确 定</el-button>
          </span>
  </el-dialog>
</template>
<script>
import {getUserOption,addIntroducer,setCustomerIntroducer,introducerList} from '@/api/partner'
import {goodsLineAddTracking} from '@/api/company'
import {validatePhone} from '@/utils/validate';
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'



const defeaultTeiJianForm = {
  introducerId:null,
  startTime:'',
}
const defeaultTeiJianForm2 = {
  introducerType:1,
  introducerName:'',
  introducerMobile:'',
  startTime:'',
}
export default {
  name: "addTjr",
  data(){
    return {
      teiJianForm:JSON.parse(JSON.stringify(defeaultTeiJianForm)),
      teiJianForm2:JSON.parse(JSON.stringify(defeaultTeiJianForm2)),
      dialogVisible17:false,
      btnLoading17:false,
      rules17:{
        introducerId:[{required: true, message: '请选择推荐人', trigger: 'change'},],
        startTime:[{required: true, message: '请选择推荐时间', trigger: 'change'},],
      },
      rules18:{
        introducerType:[{required: true, message: '请选择推荐类型', trigger: 'change'},],
        introducerName:[{required: true, message: '请选择推荐人', trigger: 'change'},],
        introducerMobile:[{required: true, message: '请输入推荐人手机号', trigger: 'blur'},],
        startTime:[{required: true, message: '请选择推荐时间', trigger: 'change'},],
      },

      teiJianActiveName:'first',
      remoteMethodLoading:false,
      options17:[],
      userOptionList:[],
      type:'',
      customerId:'',

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {
      this.getUserOptionList()
  },
  filters: {

  },
  methods:{
    changeIntroducerType(){
      this.teiJianForm2.introducerName = '';
      this.teiJianForm2.introducerMobile = '';
    },

    //根据关键字获取所有推荐人
    remoteMethod(query) {
      if (query !== '') {
        this.remoteMethodLoading = true;
        introducerList({keywords:query,pageNum:1,pageSize:10000}).then((res)=>{
          this.options17 = res.list;
          this.remoteMethodLoading = false;
        }).catch(()=>{
          this.options17 = [];
          this.remoteMethodLoading = false;
        })
      } else {
        this.options17 = [];
      }
    },

    //获取员工下拉选项
    getUserOptionList(){
      getUserOption({status:1}).then((res)=>{
        this.userOptionList = res;
      })
    },

    //选择员工名称
    handleSelectUserName(item){
      this.teiJianForm2.introducerName = item.realName;
      this.teiJianForm2.introducerMobile = item.mobile
      // this.teiJianForm2.introducerName = item.realName;
    },

    //显示新增推荐人弹窗
    showTeiJian(type,customerId){
      this.dialogVisible17 = true;
      this.options17 = [];
      this.type = type;
      this.customerId = customerId;
      if(this.type == 'edit'){
        this.teiJianActiveName = 'first';
      }else{
        this.teiJianActiveName = 'second';
      }
      this.teiJianForm = JSON.parse(JSON.stringify(defeaultTeiJianForm));
      this.teiJianForm2 = JSON.parse(JSON.stringify(defeaultTeiJianForm2));
    },

    //关闭新增推荐人弹窗
    handleClose17(){
      this.dialogVisible17 = false;
    },

    //确认新增推荐人
    handleConfirm17(){
      if(this.teiJianActiveName == 'first'){
        this.$refs.teiJianForm.validate((valid) => {
          if (valid) {
            this.btnLoading17 = true;
            let data = JSON.parse(JSON.stringify(this.teiJianForm));
            data.customerId = this.customerId;
            setCustomerIntroducer(data).then((res)=>{
              console.log("res",res)
              this.btnLoading17 = false;
              this.handleClose17();
              this.$emit('getintroducerList',res.introduceId)
            }).catch(()=>{
              this.btnLoading17 = false;
            })
          }
        })

      }else if(this.teiJianActiveName == 'second'){
        this.$refs.teiJianForm2.validate((valid) => {
          if (valid) {
            this.btnLoading17 = true;
            let data = JSON.parse(JSON.stringify(this.teiJianForm2));
            data.customerId = this.customerId;
            addIntroducer(data).then((res)=>{
              this.btnLoading17 = false;
              this.handleClose17();
              this.$emit('getintroducerList',res.introduceId)
            }).catch(()=>{
              this.btnLoading17 = false;
            })
          }
        })
      }
    },
  },
}
</script>

<style  lang="scss">

</style>
